{include file="public/header" /}
<style>
    html {
        background-color: #f2f2f2 !important;
    }

    .layuiadmin-card-header-auto {
        padding: 10px !important;
    }

    .layui-tree-icon {
        height: 14px !important;
        line-height: 14px !important;
        width: 14px !important;
    }
</style>
<body>
<div class="layui-fluid layui-anim layui-leftbit">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="nav_search">
                    <form class="layui-form">
                        <div class="layui-inline">
                            <input class="layui-input" placeholder="会员编号/昵称/手机号筛选" name="keyword"
                                   value="<?php echo request()->get('keyword');?>">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-useradmin layui-btn-sm" lay-submit="" lay-filter="sreach">搜索</button>
                            {if $Request.get.keyword}
                            <a href="{:url('relation/index')}" class="layui-btn layui-btn-danger layui-btn-sm">重置</a>
                            {/if}
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            {foreach name="list" item="vo"}
            <div class="layui-tree layui-form layui-tree-line" lay-filter="LAY-tree-1">
                <div class="layui-tree-set layui-tree-spread layui-tree-setHide">
                    <div class="layui-tree-entry opens" data-id="{$vo.id}">
                        <div class="layui-tree-main">
					<span class="layui-tree-iconClick layui-tree-icon">
						<i class="layui-icon layui-icon-addition"></i>
					</span>
                            <span class="layui-tree-txt">{$vo.title}</span>
                        </div>
                    </div>
                    <div class="tp_{$vo.id}"></div>
                </div>
            </div>
            {/foreach}
        </div>
    </div>
</div>
</body>
{include file="public/footer" /}
<script id="template" type="text/html">
    {{# for(var i = 0; i < d.length; i++) { }}
    <div class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine" style="display: block">
        <div class="layui-tree-set">
            <div class="layui-tree-entry opens" data-id="{{d[i].id}}">
                <div class="layui-tree-main">
						<span class="layui-tree-iconClick layui-tree-icon">
							<i class="layui-icon layui-icon-addition"></i>
						</span>
                    <span class="layui-tree-txt">{{d[i].title}}</span>
                </div>
            </div>
            <div class="tp_{{d[i].id}}"></div>
        </div>
    </div>
    {{# } }}
</script>
<script>
    layui.use(['laytpl'], function () {
        var laytpl = layui.laytpl,$ = layui.jquery;
        $('.layui-tree').on('click', '.opens', function () {
            var obj = $(this);
            var id = obj.attr('data-id');
            var open = obj.find('i').hasClass('layui-icon-subtraction');
            if (open) {
                $('.tp_' + id).html('');
                obj.find('i').removeClass('layui-icon-subtraction').addClass('layui-icon-addition');
                return false;
            }
            layer.load(2);
            $.ajax({
                type: 'GET',
                url: '{:url("getData")}',
                data: {id: id},
                dataType: "json",
                success: function (data) {
                    layer.closeAll()
                    var tpl = document.getElementById('template').innerHTML;
                    laytpl(tpl).render(data.data, function (html) {
                        $('.tp_' + id).html(html);
                    });
                    obj.find('i').removeClass('layui-icon-addition').addClass('layui-icon-subtraction');
                }
            });
        });
    });
</script>
</html>